<!-- 首页 -->
<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<uni-nav-bar statusBar="true" backgroundColor="#f3f3f3" height="0px">

		</uni-nav-bar>

		<!-- 新建命盘 -->
		<view class="example-xjmp">
			<view class="example-top-titleimg">
			</view>
			<view class="tab-container">
				<view class="tab" v-for="(item, index) in tabs" :key="index" :class="{ active: current === index }"
					@click="current = index">
					<text>{{ item }}</text>
					<view class="underline" v-if="current === index"></view>
				</view>
			</view>
			<!-- 排时盘 -->
			<view class="example-top-form" v-show="current == 0">
				<u--form ref="uForm">
					<!-- 时间 -->
					<u-form-item class="u-form-item" label-width="90px" label="" prop="name" borderBottom
						@click="datashow1 = true;">
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">时间</span>
						<view class="color:#ffffff !import">
							{{ itendata }}
						</view>
					</u-form-item>
					<!-- 事主面测 -->
					<view class="testingMode">
						<u-radio-group v-model="radioOptions.testingSelectedValue">
							<u-radio :customStyle="{ marginRight: '10px', height: '5vw' }"
								v-for="(item, index) in radioOptions.testingModeData" activeColor="#267681" :key="index"
								labelColor="#fff" :size="13" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
					<!-- 姓名 -->
					<u-form-item class="u-form-item" label-width="90px" prop="name" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">姓名</span><u--input
							v-model="ruleForm.name" border="none"></u--input>
					</u-form-item>
					<!-- 性别 -->
					<u-form-item class="u-form-item" label-width="90px" prop="gender" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">性别</span>
						<u-radio-group v-model="ruleForm.gender">
							<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in radiolist1" :key="index"
								activeColor="#267681" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
						<span style="margin-right:15rpx ;font-size: 30rpx;color: #ffffff;">生年</span>
						<uni-number-box background="#337681" :value="BirthYear" :step="1" max="2100" :max="2100" />
					</u-form-item>
					<!-- 出生地 -->
					<u-form-item class="u-form-item" label-width="90px" label="" prop="address" @click="addressShow = true;"
						borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">出生地</span>
						<view style="color: #ffffff;">{{ address }}</view>
						<address-picker :show="addressShow" @confirm='confirmAddress' @cancel='addressShow = false'
							@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
							:type="type"></address-picker>
					</u-form-item>
					<!-- 事项 -->
					<u-form-item class="u-form-item" label-width="90px" label="" prop="address" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">事项</span>
						<uni-data-select v-model="YongShenArrVal" :localdata="YongShenArr" @change="change"></uni-data-select>
					</u-form-item>
					<!-- 现场起局 -->
					<view class="testingMode">
						<u-radio-group v-model="radioOptions.StartingSelectedValue">
							<u-radio :customStyle="{ marginRight: '10px', height: '5vw' }"
								v-for="(item, index) in radioOptions.StartingModeData" activeColor="#267681" :key="index"
								labelColor="#fff" :size="13" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
					<u-form-item class="u-form-item" label-width="90px" label="" prop="address" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">联系</span>
						<input type="text" maxlength="11" v-model="phone" />
					</u-form-item>
					<!-- 方位 -->
					<view class="orientation">
						<view style="font-size: 30rpx;color: #ffffff;text-align: center;">相对于你的方位</view>
						<u-radio-group v-model="selectedValue" @change="onRadioChange">
							<!-- 第一行（3个元素，居中） -->
							<view class="radio-row">
								<u-radio v-for="(item, index) in formattedOptions[0]" :key="'row1-' + index"
									:customStyle="{ marginRight: '10px' }" activeColor="#267681" labelColor="#fff" :size="13"
									:label="item.label" :name="item.value" />
							</view>

							<!-- 第二行（2个元素，带间隔） -->
							<view class="radio-row" style="display: flex; margin: 0 120rpx; justify-content: space-around;">
								<u-radio v-for="(item, index) in formattedOptions[1]" :key="'row2-' + index"
									:customStyle="{ marginRight: '10px' }" activeColor="#267681" labelColor="#fff" :size="13"
									:label="item.label" :name="item.value" />
							</view>

							<!-- 第三行（3个元素，居中） -->
							<view class="radio-row">
								<u-radio v-for="(item, index) in formattedOptions[2]" :key="'row3-' + index"
									:customStyle="{ marginRight: '10px' }" activeColor="#267681" labelColor="#fff" :size="13"
									:disabled="item.disabled" :label="item.label" :name="item.value" />
							</view>
						</u-radio-group>
					</view>
					<!-- 起局方式 -->
					<view class="way">
						<view style="font-size: 30rpx;color: #ffffff;text-align: center;">起局方式</view>
						<u-radio-group v-model="radioOptions.waySelectedValue">
							<u-radio :customStyle="{ marginRight: '10px', height: '5vw' }"
								v-for="(item, index) in radioOptions.wayModeData.slice(0, 3)" activeColor="#267681" :key="index"
								:disabled="item.disabled" labelColor="#fff" :size="13" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
				</u--form>
				<view class="van-btn" style="margin: 16px; text-align: center;" @click="getAllInformation">
					<view id="van-btn-div"></view>
				</view>
				<!-- 时间弹出层 -->
				<u-datetime-picker :show="datashow1" v-model="value1" mode="datetime" @confirm="confirm" closeOnClickOverlay
					@cancel="datashow1 = false" @change="change" @close="datashow1 = false"></u-datetime-picker>
			</view>
			<!-- 山向盘 -->
			<view class="example-top-form Shanxiang" v-show="current == 1">
				<u--form ref="uForm">
					<!-- 时间 -->
					<u-form-item class="u-form-item" label-width="90px" label="" prop="name" borderBottom
						@click="datashow1 = true;">
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">时间</span>
						<view class="color:#ffffff">
							{{ itendata }}
						</view>
					</u-form-item>
					<!-- 姓名 -->
					<u-form-item class="u-form-item" label-width="90px" prop="name" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">姓名</span><u--input
							v-model="ruleForm.name" border="none"></u--input>
						<!-- 性别 -->
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">性别</span>
						<u-radio-group v-model="ruleForm.gender">
							<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in radiolist1" :key="index"
								activeColor="#267681" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item class="shengnian" label-width="90px" prop="gender" borderBottom>
						<span class="YearNameSpan" style="">男主生年</span>
						<input style="width: 12vw;text-align: center;" @blur="handleYearChange('MaleYear')" type="number"
							v-model="FirYear.MaleYear">
						<span class="YearNameSpan" style="margin-left: 1vw;">{{ FirYearName.MaleYearName
						}}</span>
						<span class="YearNameSpan" style="">儿子生年</span>
						<input style="width: 12vw;text-align: center;" @blur="handleYearChange('senYear')" type="number"
							v-model="FirYear.senYear">
						<span class="YearNameSpan" style="margin-left: 1vw;">{{ FirYearName.senYearName
						}}</span>
					</u-form-item>
					<u-form-item class="shengnian" label-width="90px" prop="gender" borderBottom>
						<span class="YearNameSpan" style="">女主生年</span>
						<input style="width: 12vw;text-align: center;" @blur="handleYearChange('heroineYear')" type="number"
							v-model="FirYear.heroineYear">
						<span class="YearNameSpan" style="margin-left: 1vw;">{{
							FirYearName.heroineYearName }}</span>
						<span class="YearNameSpan" style="">女儿生年</span>
						<input style="width: 12vw;text-align: center;" @blur="handleYearChange('daughterYear')" type="number"
							v-model="FirYear.daughterYear">
						<span class="YearNameSpan" style="margin-left: 1vw;">{{
							FirYearName.daughterYearName }}</span>
					</u-form-item>
					<!-- 出生地 -->
					<u-form-item class="u-form-item" label-width="90px" label="" prop="address" @click="addressShow = true;"
						borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">出生地</span>
						<view style="color: #ffffff;">{{ address }}</view>
						<address-picker :show="addressShow" @confirm='confirmAddress' @cancel='addressShow = false'
							@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
							:type="type"></address-picker>
					</u-form-item>
					<!-- 事项 -->
					<u-form-item class="u-form-item" label-width="90px" label="" prop="address" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">事项</span>
						<uni-data-select v-model="YongShenArrVal" :localdata="YongShenArr" @change="change"></uni-data-select>
					</u-form-item>
					<u-form-item class="u-form-item" label-width="90px" label="" prop="address" borderBottom>
						<span style="margin-right:30rpx ;font-size: 30rpx;color: #ffffff;">联系</span>
						<input type="text" maxlength="11" v-model="phone" />
					</u-form-item>
					<!-- 起局方式 -->
					<view class="way">
						<view style="font-size: 30rpx;color: #ffffff;text-align: center;">起局方式</view>
						<u-radio-group v-model="radioOptions.waySelectedValue">
							<u-radio :customStyle="{ marginRight: '10px', height: '5vw' }"
								v-for="(item, index) in radioOptions.wayModeData.slice(3, 5)" activeColor="#267681" :key="index"
								labelColor="#fff" :size="13" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
					<!-- 山向法起局选择数据 -->
					<u-form-item v-show="radioOptions.waySelectedValue == 'shanxiang'" class="u-form-item" label-width="90px"
						label="" prop="address" borderBottom>
						<uni-data-picker style="color: black;" :localdata="MountainArr" popup-title="" @change="onchange"
							@nodeclick="onnodeclick" v-model="selectedMountain"></uni-data-picker>
						<view style="width: 43vw;">{{ MountainVal }}</view>
						<view style="width: 15vw;">启用年份</view>
						<input :value="BirthYear" :step="'1'" max="2100" :max="2100" />
					</u-form-item>
					<!-- 角向法起局选择数据 -->
					<u-form-item v-show="radioOptions.waySelectedValue == 'jiaoxiang'" class="u-form-item" label-width="90px"
						label="" prop="address" borderBottom>
						<uni-number-box background="#337681" v-model="limit" :step="1" max="2100" :max="2100" />
						<view style="margin-left: 10px;">{{ hornXiang }}</view>
						<view style="margin-left: 10px;">{{ MountainJushu }}</view>
						<view style="width: 8vw;margin: 0 10px;">启用年份</view>
						<input style="width: 12vw;" :value="BirthYear" :step="'1'" max="2100" :max="2100" />
					</u-form-item>
				</u--form>
				<view class="van-btn" style="margin: 16px; text-align: center;" @click="getAllInformation">
					<view id="van-btn-div"></view>
				</view>
				<!-- 时间弹出层 -->
				<u-datetime-picker :show="datashow1" v-model="value1" mode="datetime" closeOnClickOverlay @confirm="confirm"
					@cancel="datashow1 = false" @change="change" style="color: #ffffff;"
					@close="datashow1 = false"></u-datetime-picker>
			</view>
		</view>
		<!-- END--新建命盘 -->
	</view>
</template>

<script>
import {
	yangpanAPI,
	yinpanAPI,
	yangkepanAPI,
	shanxiangAPI,
	getYearCycle
} from "@/api/user";
import store from "@/store/index";

import QiMenJuShuQuery from './ShanxiangQimen.js';


export default {
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		if (systemInfo && systemInfo.statusBarHeight !== undefined) {
			document.documentElement.style.setProperty('--status-bar-height', `${systemInfo.statusBarHeight}px`);
		} else {
			console.warn("systemInfo 未定义或 statusBarHeight 为空");
		}
	},
	data() {
		return {
			// 出生地
			selected: {
				province: '',
				city: '',
				area: ''
			},
			phone: '略',
			BirthYear: '1980',
			//基本信息
			ruleForm: {
				name: '匿名',
				gender: '男'
			},
			radiolist1: [{
				name: '男',
				disabled: false
			},
			{
				name: '女',
				disabled: false
			},
			],
			showSex: false,
			YongShenArrVal: '工作就业',
			YongShenArr: [{
				value: '工作就业',
				text: '工作就业'
			}, {
				value: '恋爱婚姻',
				text: '恋爱婚姻'
			}, {
				value: '怀孕分娩',
				text: '怀孕分娩'
			}, {
				value: '经营求财',
				text: '经营求财'
			}, {
				value: '人体疾病',
				text: '人体疾病'
			}, {
				value: '行人走失',
				text: '行人走失'
			}, {
				value: '财务丢失',
				text: '财务丢失'
			}, {
				value: '求学考试',
				text: '求学考试'
			}, {
				value: '出行预测',
				text: '出行预测'
			}, {
				value: '刑事案件',
				text: '刑事案件'
			}, {
				value: '官司诉讼',
				text: '官司诉讼'
			}, {
				value: '人生命运',
				text: '人生命运'
			}, {
				value: '地理环境',
				text: '地理环境'
			}, {
				value: '天时气象',
				text: '天时气象'
			}, {
				value: '体育竞赛',
				text: '体育竞赛'
			}, {
				value: '军事实践',
				text: '军事实践'
			},],
			value1: Number(new Date()), //时间弹出层
			datashow1: false, //时间
			ganzhiData: '',
			itendata: this.getCurrentDateTime(), //完整的时间
			address: "北京市北京市东城区",
			addressShow: false,
			indexs: [0, 0, 0],
			areaId: [1, 110000, 110101],
			addressData: ['北京市', '北京市', '东城区'],
			type: 3, //1-省，2-省市，3-省市区
			radioOptions: {
				testingSelectedValue: "事主面测",
				testingModeData: [{
					name: '事主面测',
					disabled: false
				},
				{
					name: '求测者函测',
					disabled: false
				},
				],
				StartingSelectedValue: '现场起局',
				StartingModeData: [{
					name: '现场起局',
					disabled: false
				},
				{
					name: '异地起局',
					disabled: false
				},
				],
				waySelectedValue: 'yinpan',
				wayModeData: [{
					name: '阳盘',
					value: 'yangpan',
					disabled: true
				}, {
					name: '阴盘',
					value: 'yinpan',
					disabled: false
				}, {
					name: '阳刻盘',
					value: 'yangkepan',
					disabled: true
				}, {
					name: '山向法起局',
					value: 'shanxiang',
					disabled: false
				}, {
					name: '角向法起局',
					value: 'jiaoxiang',
					disabled: false
				}],
			},
			options: [{
				value: "西北",
				label: "西北"
			},
			{
				value: "正北",
				label: "正北"
			},
			{
				value: "东北",
				label: "东北"
			},
			{
				value: "正西",
				label: "正西"
			},
			{
				value: "正东",
				label: "正东"
			},
			{
				value: "西南",
				label: "西南"
			},
			{
				value: "正南",
				label: "正南"
			},
			{
				value: "东南",
				label: "东南"
			}
			],
			selectedValue: "正北",
			direction: '',
			tabs: ['排时盘', '山向盘'],
			current: 0,
			selectedMountain: ['12-1', '172.5-177.4'], // 练级选择器初始默认值
			MountainVal: '172.5-177.4', // 山向法起局角度 (207.5-212.4)
			radioMountain: 'shanxiang', // 山向和角向的起局选择
			MountainJushu: '阳二局', // 山向法局数 (阳二局)
			Hours: '12', // 时数(12)
			hornXiang: '子山午向', // 山向 (子山午向)
			limit: '175', // 角向法起局角度 (175)
			year: 1980, //年份 &启用年份
			FirYear: {
				MaleYear: 1980, // 男主生年
				senYear: '1980', // 儿子生年
				heroineYear: '1980', // 女主生年
				daughterYear: '1980', // 女儿生年
			},
			FirYearName: {
				MaleYearName: '庚申', // 男主生年
				senYearName: '庚申', // 儿子生年
				heroineYearName: '庚申', // 女主生年
				daughterYearName: '庚申', // 女儿生年
			},
			MountainArr: [{
				value: '12-1',
				text: '子山午向',
				children: [{
					value: '172.5-177.4',
					text: '阳二局',
				}, {
					value: '177.5-182.4',
					text: '阳八局',
				}, {
					value: '182.5-187.4',
					text: '阳五局',
				}]
			}, {
				value: '14-1',
				text: '癸山丁向',
				children: [{
					value: '187.5-192.4',
					text: '阳三局',
				}, {
					value: '192.5-197.4',
					text: '阳九局',
				}, {
					value: '197.5-202.4',
					text: '阳六局',
				}]
			}, {
				value: '14-2',
				text: '丑山未向',
				children: [{
					value: '202.5-207.4',
					text: '阳八局',
				}, {
					value: '207.5-212.4',
					text: '阳五局',
				}, {
					value: '212.5-217.4',
					text: '阳二局',
				}]
			}, {
				value: '16-1',
				text: '艮山坤向',
				children: [{
					value: '217.5-222.4',
					text: '阳九局',
				}, {
					value: '222.5-227.4',
					text: '阳六局',
				}, {
					value: '227.5-232.4',
					text: '阳三局',
				}]
			}, {
				value: '16-2',
				text: '寅山申向',
				children: [{
					value: '232.5-237.4',
					text: '阳一局',
				}, {
					value: '237.5-242.4',
					text: '阳七局',
				}, {
					value: '242.5-247.4',
					text: '阳四局',
				}]
			}, {
				value: '18-1',
				text: '甲山庚向',
				children: [{
					value: '247.5-252.4',
					text: '阳三局',
				}, {
					value: '252.5-257.4',
					text: '阳九局',
				}, {
					value: '257.5-262.4',
					text: '阳六局',
				}]
			}, {
				value: '18-2',
				text: '卯山酉向',
				children: [{
					value: '262.5-267.4',
					text: '阳四局',
				}, {
					value: '267.5-272.4',
					text: '阳一局',
				}, {
					value: '272.5-277.4',
					text: '阳七局',
				}]
			}, {
				value: '20-1',
				text: '乙山辛向',
				children: [{
					value: '277.5-282.4',
					text: '阳五局',
				}, {
					value: '282.5-287.4',
					text: '阳二局',
				}, {
					value: '287.5-292.4',
					text: '阳八局',
				}]
			}, {
				value: '20-2',
				text: '辰山戌向',
				children: [{
					value: '292.5-297.4',
					text: '阳四局',
				}, {
					value: '297.5-302.4',
					text: '阳一局',
				}, {
					value: '302.5-307.4',
					text: '阳七局',
				}]
			}, {
				value: '22-1',
				text: '巽山乾向',
				children: [{
					value: '307.5-312.4',
					text: '阳四局',
				}, {
					value: '312.5-317.4',
					text: '阳一局',
				}, {
					value: '317.5-322.4',
					text: '阳七局',
				}]
			}, {
				value: '22-2',
				text: '巳山亥向',
				children: [{
					value: '322.5-327.4',
					text: '阴六局',
				}, {
					value: '327.5-332.4',
					text: '阴三局',
				}, {
					value: '322.5-337.4',
					text: '阴九局',
				}]
			}, {
				value: '0-1',
				text: '丙山壬向',
				children: [{
					value: '337.5-342.4',
					text: '阴九局',
				}, {
					value: '342.5-347.4',
					text: '阴三局',
				}, {
					value: '347.5-352.4',
					text: '阴六局',
				}]
			}, {
				value: '0-2',
				text: '午山子向',
				children: [{
					value: '352.5-357.4',
					text: '阴八局',
				}, {
					value: '357.5-2.4',
					text: '阴二局',
				}, {
					value: '2.5-7.4',
					text: '阴五局',
				}]
			}, {
				value: '2-1',
				text: '丁山癸向',
				children: [{
					value: '7.5-12.4',
					text: '阴七局',
				}, {
					value: '12.5-17.4',
					text: '阴一局',
				}, {
					value: '17.5-22.4',
					text: '阴四局',
				}]
			}, {
				value: '2-2',
				text: '未山丑向',
				children: [{
					value: '22.5-27.4',
					text: '阴二局',
				}, {
					value: '27.5-32.4',
					text: '阴五局',
				}, {
					value: '32.5-37.4',
					text: '阴八局',
				}]
			}, {
				value: '4-1',
				text: '坤山艮向',
				children: [{
					value: '37.5-42.4',
					text: '阴一局',
				}, {
					value: '42.5-47.4',
					text: '阴七局',
				}, {
					value: '47.5-52.4',
					text: '阴四局',
				}]
			}, {
				value: '4-2',
				text: '申山寅向',
				children: [{
					value: '52.5-57.4',
					text: '阴九局',
				}, {
					value: '57.5-62.4',
					text: '阴三局',
				}, {
					value: '62.5-67.4',
					text: '阴六局',
				}]
			}, {
				value: '6-1',
				text: '庚山甲向',
				children: [{
					value: '67.5-72.4',
					text: '阴七局',
				}, {
					value: '72.5-77.4',
					text: '阴一局',
				}, {
					value: '77.5-82.4',
					text: '阴四局',
				}]
			}, {
				value: '6-2',
				text: '酉山卯向',
				children: [{
					value: '82.5-87.4',
					text: '阴六局',
				}, {
					value: '87.5-92.4',
					text: '阴九局',
				}, {
					value: '92.5-97.4',
					text: '阴三局',
				}]
			}, {
				value: '8-1',
				text: '辛山乙向',
				children: [{
					value: '97.5-102.4',
					text: '阴五局',
				}, {
					value: '102.5-107.4',
					text: '阴二局',
				}, {
					value: '107.5-112.4',
					text: '阴八局',
				}]
			}, {
				value: '8-2',
				text: '戌山辰向',
				children: [{
					value: '112.5-117.4',
					text: '阴六局',
				}, {
					value: '117.5-122.4',
					text: '阴九局',
				}, {
					value: '122.5-127.4',
					text: '阴三局',
				}]
			}, {
				value: '10-1',
				text: '乾山巽向',
				children: [{
					value: '127.5-132.4',
					text: '阴五局',
				}, {
					value: '132.5-137.4',
					text: '阴八局',
				}, {
					value: '137.5-142.4',
					text: '阴二局',
				}]
			}, {
				value: '10-2',
				text: '亥山巳向',
				children: [{
					value: '142.5-147.4',
					text: '阳四局',
				}, {
					value: '147.5-152.4',
					text: '阳一局',
				}, {
					value: '152.5-157.4',
					text: '阳七局',
				}]
			}, {
				value: '12-2',
				text: '壬山丙向',
				children: [{
					value: '157.5-162.4',
					text: '阳四局',
				}, {
					value: '162.5-167.4',
					text: '阳一局',
				}, {
					value: '167.5-172.4',
					text: '阳七局',
				}]
			}]
		}
	},
	methods: {
		// 完整时间
		confirm(e) {
			this.ganzhiData = this.result(e.value, e.mode)
			this.itendata = `${this.ganzhiData}`
			this.datashow1 = false
		},
		cancel() { },
		change(e) { },
		close() { },
		result(time, mode) {
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast
			return toast(timeFormat(time, 'yyyy-mm-dd hh:MM:ss')), timeFormat(time, 'yyyy-mm-dd hh:MM:ss')
		},
		// 出生地和经纬度
		async confirmAddress(val) {
			this.selected.province = val.value[0]
			this.selected.city = val.value[1]
			this.selected.area = val.value[2]
			this.address = val.value.join('')
			this.addressShow = false
		},
		onRadioChange(e) {
			this.selectedValue = e.detail.value;
		},
		async getAllInformation() {
			if (this.itendata == '') {
				return uni.showToast({
					title: '请选择时间',
					icon: 'none',
					duration: 1000
				});
			}
			if (this.ruleForm.name.length < 2) {
				return uni.showToast({
					title: '请填写姓名',
					icon: 'none',
					duration: 1000
				});
			}
			switch (this.AllInformation.wayData) {
				case "yangpan":
					this.callApi(yangpanAPI, this.AllInformation.time.split(" ")[0], this.AllInformation.time.split(" ")[1]);
					store.commit(
						"setUploadData",
						Object.assign({}, store.state.uploadData, this.AllInformation, {
							method: "yangpanAPI"
						})
					);
					break;
				case "yinpan":
					this.callApi(yinpanAPI, this.AllInformation.time.split(" ")[0], this.AllInformation.time.split(" ")[1]);
					store.commit(
						"setUploadData",
						Object.assign({}, store.state.uploadData, this.AllInformation, {
							method: "yinpanAPI"
						})
					);
					break;
				case "yangkepan":
					this.callApi(yangkepanAPI, this.AllInformation.time.split(" ")[0], this.AllInformation.time.split(" ")[1]);
					store.commit(
						"setUploadData",
						Object.assign({}, store.state.uploadData, this.AllInformation, {
							method: "yangkepanAPI"
						})
					);
					break;
				default:
					const result = await shanxiangAPI(this.MountainJushu, this.Hours, this.BirthYear)
					console.log(828, this.MountainJushu, this.Hours, this.BirthYear);
					store.commit(
						"setUploadData",
						Object.assign({}, store.state.uploadData, this.AllInformation, {
							method: "shanxiangAPI",
						})
					);
					store.commit("setQimenResponseData", result.data);
					uni.navigateTo({
						url: '/subPackages/paipan/pages/pan'
					})
					break;
			}
		},
		callApi(apiFunction, birDate, birTime) {
			console.log(842, apiFunction, birDate, birTime);
			apiFunction(birDate, birTime)
				.then(async (response) => {
					store.commit("setQimenResponseData", response.data);
					uni.navigateTo({
						url: '/subPackages/paipan/pages/pan'
					})
				})
				.catch((error) => {
					console.error("API错误:", error);
					Message.error("请求失败，请联系客服！");
				});
		},
		getCurrentDateTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		onchange(e) {
			const value = e.detail.value
			console.log(value);
			this.MountainVal = value[1].value
			this.MountainJushu = value[1].text
			this.Hours = value[0].value.split('-')[0]
			this.hornXiang = value[0].text
		},
		onnodeclick(node) { },
		async handleYearChange(e) {
			const yearMapping = {
				MaleYear: {
					value: this.FirYear.MaleYear,
					target: val => this.FirYearName.MaleYearName = val,
				},
				senYear: {
					value: this.FirYear.senYear,
					target: val => this.FirYearName.senYearName = val,
				},
				heroineYear: {
					value: this.FirYear.heroineYear,
					target: val => this.FirYearName.heroineYearName = val,
				},
				daughterYear: {
					value: this.FirYear.daughterYear,
					target: val => this.FirYearName.daughterYearName = val,
				},
			};

			const entry = yearMapping[e];
			if (entry) {
				const {
					data
				} = await getYearCycle(entry.value);
				entry.target(data.data);
			}
		}
	},
	computed: {
		// 处理成 3 行布局
		formattedOptions() {
			return [
				this.options.slice(0, 3), // 第一行
				this.options.slice(3, 5), // 第二行（两个元素）
				this.options.slice(5, 8) // 第三行
			];
		},
		AllInformation() {
			return {
				time: this.itendata,
				testingMode: this.radioOptions.testingSelectedValue,
				name: this.ruleForm.name,
				gender: this.ruleForm.gender,
				BirthYear: this.BirthYear,
				address: this.address,
				YongShenArrVal: this.YongShenArrVal,
				Starting: this.radioOptions.StartingSelectedValue,
				phone: this.phone,
				orientationData: this.selectedValue,
				wayData: this.radioOptions.waySelectedValue,
				Hours: this.Hours,
				MountainJushu: this.MountainJushu,
				selectedMountain: this.selectedMountain,
				MountainVal: this.MountainVal,
				FirYear: this.FirYear,
				FirYearName: this.FirYearName,
			}
		},
	},
	watch: {
		limit: {
			handler(newValue) {
				const qiMenQuery = new QiMenJuShuQuery();
				const result = qiMenQuery.query(newValue);
				this.hornXiang = result.shanxiang
				this.MountainJushu = result.juShu
			},
		},
		current: {
			handler(newValue) {
				switch (newValue) {
					case 0:
						this.radioOptions.waySelectedValue = 'yinpan';
						break;
					case 1:
						this.radioOptions.waySelectedValue = 'shanxiang';
				}
			}
		}
	}
}
</script>


<style scoped>
.tab-container {
	display: flex;
	justify-content: space-around;
	border-bottom: 1rpx solid #eee;
	padding-top: 20rpx;
	padding-bottom: 10rpx;
	margin: 0 20px;
}

.tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.tab text {
	font-size: 32rpx;
	color: #fff;
}

.tab.active text {
	color: #f3b13e;
	font-weight: bold;
}

.underline {
	width: 60rpx;
	height: 6rpx;
	background-color: #f3b13e;
	border-radius: 6rpx;
	margin-top: 6rpx;
}
</style>

<style lang="scss" scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.example-top-form {
	width: 750rpx;
	height: 780rpx;
}

.u-form-item {
	padding: 0 40rpx;
}

.example-xjmp {
	width: 100vw;
	height: 110vh;
	background-color: #99a9bf;
	background-image: url(@/static/example-top-bgimg.png);
	background-size: 100% 100%;
}

.example-xjmp .example-top-titleimg {
	display: flex;
	justify-content: center;
	text-align: center;
	padding-top: 6vw;
}

::v-deep .uni-input-input {
	color: #ffffff;
}

.shengnian ::v-deep .uni-input-input {
	color: #ffffff;
	background-color: rgb(51, 118, 129);
	width: 12vw;
}

.shengnian input {}

.shengnian .YearNameSpan {
	font-size: 30rpx;
	color: #ffffff;
	width: 17vw;
}

::v-deep .u-form-item {
	color: #ffffff !important;
}

.u-form-item__body__right__content__slot {
	color: #ffffff !important;
}

.example-top-titleimg {
	height: 5vw;
}

// 下拉选框字体颜色
::v-deep .uni-select__selector-item[data-v-558a1c68] {
	color: #000;
}

::v-deep .uni-select__input-text[data-v-558a1c68] {
	color: #fff;
}

// 方位
.orientation {
	color: #fff;
	margin: 0 40rpx;
	font-size: 14px;
	border-bottom: 1px solid #7d7f96;
	text-align: center;

	::v-deep .uni-radio-input {
		width: 15px;
		height: 15px;
	}

	view {
		margin: 5px 0;
	}

	radio {
		margin-left: 7px;
	}
}

.way {
	color: #fff;
	text-align: center;
	font-size: 13px;
	margin-top: 13px;

	radio {
		margin-left: 7px;
	}

	::v-deep.u-radio-group--row {
		justify-content: center;
		height: 20px;
	}

	::v-deep .uni-radio-input {
		width: 12px;
		height: 12px;
	}
}

.testingMode {
	color: #fff;
	text-align: center;
	font-size: 13px;
	margin-top: 13px;

	::v-deep .u-radio-group--row {
		justify-content: center;
	}

	radio {
		margin-left: 7px;
	}
}

.van-btn {
	display: flex;
	justify-content: center;
}

#van-btn-div {
	width: 534rpx;
	height: 146rpx;
	background-image: url(@/static/van-image.png);
	background-size: 100% 100%;
}

.Shanxiang {

	::v-deep .input-value-border[data-v-7939fa20] {
		width: 40vw;
	}

	::v-deep .placeholder[data-v-7939fa20] {
		color: #fff;
	}

	::v-deep .text-color[data-v-7939fa20] {
		color: #fff;
	}
}


::v-deep .uni-select {
	width: 75vw;
}

::v-deep .u-form-item__body__right__content__slot.data-v-5e7216f1 {
	display: flex;
	flex-direction: row;
	align-items: center;
}


::v-deep .u-radio-group--row.data-v-4a02ae53 {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

// 表单内边距--weixin
::v-deep .u-form-item.data-v-5e7216f1 {
	padding: 0 40rpx;
}

// lable字体颜色--weixin
::v-deep .u-form-item__body__left__content__label.data-v-5e7216f1 {
	color: #ffffff !important;
}

// 输入框背景颜色--weixin
::v-deep .u-input__content.data-v-fdbb9fe6 {
	// background-color: #ffffff;
	color: #ffffff;
}

// 前面的true隐藏--weixin
::v-deep .u-form-item__body__left.data-v-5e7216f1 {
	display: none;
}

//  姓名输入框内的文本颜色 -- weixin
::v-deep .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {
	color: #fff !important;
}

::v-deep .u-form-item__body__right__content__slot.data-v-5e7216f1 {
	color: #fff !important;
}

::v-deep .uni-select__input-text {
	color: #fff;
}

.orientation {

	// 安卓
	::v-deep .u-radio-group--row {
		display: block;
	}

	::v-deep uni-view {
		display: flex;
		justify-content: center;
	}

	// 微信小程序
	::v-deep .u-radio-group--row.data-v-4a02ae53 {
		display: block;
		justify-content: center;
		flex-direction: row;
	}

	view.data-v-57280228 {
		margin: 15px 0;
		display: flex;
		justify-content: center;
		height: 5vw;
	}
}
</style>